<template>
  <div class="cosmic-portal" @mousemove="handleMouseMove">
    <!-- 新增流星容器 -->
    <div class="meteors-container">
      <div 
        v-for="(meteor, index) in meteors"
        :key="'meteor'+index"
        class="meteor"
        :style="getMeteorStyle(meteor)"
      ></div>
    </div>
    
    <!-- 新增恒星容器 -->
    <div class="stars-container">
      <div 
        v-for="(star, index) in stars"
        :key="'star'+index"
        class="star"
        :style="getStarStyle(star)"
      ></div>
    </div>

    <!-- 粒子背景 -->
    <div ref="particles" class="particles-background"></div>
    
    <!-- 引导动画 -->
    <transition name="fade">
      <div v-if="showIntro" class="intro-overlay">
        <div class="intro-content">
          <h1 class="intro-title">{{ welcomeData.title }}</h1>
          <p class="intro-subtitle">{{ welcomeData.subtitle }}</p>
          <button class="intro-button" @click="startExperience">{{ welcomeData.buttonText }}</button>
        </div>
      </div>
    </transition>
    
    <!-- 主内容区 -->
    <div class="portal-container" :style="portalStyle">
      <!-- 动态悬浮菜单项 -->
      <div class="menu-container">
        <div
          v-for="item in menuItems"
          :key="item.id"
          class="menu-item"
          :style="getMenuItemStyle(item)"
          @click="navigateTo(item.url)"
          @mouseenter="hoverItem(item)"
          @mouseleave="unhoverItem(item)"
        >
          <div class="menu-item-content">
            <component :is="item.icon" class="item-icon" />
            <h3>{{ item.name }}</h3>
          </div>
          <div class="menu-item-halo" :style="{ backgroundColor: item.color }"></div>
        </div>
      </div>
      
      <!-- 中心科技球 -->
      <div 
        class="tech-sphere" 
        :class="{ active: sphereActive }"
        @click="toggleSphere"
        @mouseenter="hoverSphere"
        @mouseleave="unhoverSphere"
      >
        <div class="sphere-inner">
          <div class="sphere-core"></div>
          <div class="sphere-ring"></div>
          <div class="sphere-ring2"></div>
        </div>
      </div>
      
      <!-- 连接线 -->
      <svg class="connection-lines" width="100%" height="100%">
        <line 
          v-for="(line, index) in connectionLines" 
          :key="index"
          :x1="line.x1" 
          :y1="line.y1"
          :x2="line.x2"
          :y2="line.y2"
          :stroke="line.color"
          stroke-width="1"
          stroke-dasharray="5,2"
        />
      </svg>
    </div>
    
    <!-- 浮动装饰元素 -->
    <div class="floating-elements">
      <div 
        v-for="(element, index) in floatingElements"
        :key="'element'+index"
        class="floating-element"
        :style="getFloatingElementStyle(element)"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, markRaw } from 'vue'
import { useMouse, useRafFn } from '@vueuse/core'
import gsap from 'gsap'
import { useRouter } from 'vue-router'
import { 
  Notebook, 
  Picture, 
  Collection, 
  Link, 
  User, 
  DataBoard 
} from '@element-plus/icons-vue'

const router = useRouter()

// 引导动画状态
const showIntro = ref(true)

// 欢迎语数据集
const welcomeMessages = [
  {
    title: '嘿，你来啦！',
    subtitle: '随便看看，就像在自己家一样。',
    buttonText: '开始探索'
  },
  {
    title: '欢迎来到我的个人空间',
    subtitle: '这是一个由爱好、咖啡因和奇思妙想驱动的空间。',
    buttonText: '一起看看'
  },
  {
    title: '别慌，这只是我的个人主页',
    subtitle: '记录生活、分享想法的小小天地。',
    buttonText: '开始浏览'
  },
  {
    title: '世界很大',
    subtitle: '我在这里建了个小站歇脚。',
    buttonText: '进来坐坐'
  },
  {
    title: '欢迎来到我的脑内小剧场',
    subtitle: '这里有代码、创意和生活的点点滴滴。',
    buttonText: '开启旅程'
  },
  {
    title: '很高兴见到你！',
    subtitle: '这里是我在互联网上的小角落。',
    buttonText: '开始体验'
  },
  {
    title: '欢迎来到我的数字世界',
    subtitle: '探索无限可能的创意空间。',
    buttonText: '探索更多'
  },
  {
    title: '嘿，朋友！',
    subtitle: '这里收藏着我的技术与生活。',
    buttonText: '开始发现'
  },
  {
    title: '欢迎光临',
    subtitle: '一个程序员的思考与创造空间。',
    buttonText: '探索'
  },
  {
    title: '你好啊！',
    subtitle: '这里是我思想的避风港。',
    buttonText: '开始了解'
  },
  {
    title: '欢迎来到我的世界',
    subtitle: '让我们一起探索未知的领域。',
    buttonText: '开始旅程'
  },
  {
    title: '嗨，新访客！',
    subtitle: '感谢你抽出宝贵时间来访。',
    buttonText: '开启探索'
  }
]

// 随机获取一条欢迎语
function getRandomWelcomeMessage() {
  const randomIndex = Math.floor(Math.random() * welcomeMessages.length)
  return welcomeMessages[randomIndex]
}

// 欢迎语响应式数据
const welcomeData = ref(getRandomWelcomeMessage())

// 菜单项配置
const menuItems = ref([
  { id: 1, name: '技术博客', icon: markRaw(DataBoard), color: '#4fc08d', url: '/blog', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false },
  { id: 2, name: '生活笔记', icon: markRaw(Notebook), color: '#fbc02d', url: '/note', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false },
  { id: 3, name: '摄影相册', icon: markRaw(Picture), color: '#ff7043', url: '/photograph', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false },
  { id: 4, name: '项目展示', icon: markRaw(Collection), color: '#42a5f5', url: '/project', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false },
  { id: 5, name: '关于我', icon: markRaw(User), color: '#ba68c8', url: '/resume', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false },
  { id: 6, name: '资源收藏', icon: markRaw(Link), color: '#26c6da', url: '/works', x: Math.random() * 90, y: Math.random() * 90, scale: 1, rotation: 0, zIndex: 1, dragging: false }
])

// 浮动装饰元素
const floatingElements = ref(
  Array.from({ length: 8 }, (_, i) => ({
    id: i,
    size: Math.random() * 10 + 5,
    x: Math.random() * 100,
    y: Math.random() * 100,
    speed: Math.random() * 0.5 + 0.2,
    direction: Math.random() * 360,
    color: `hsl(${Math.random() * 60 + 200}, 70%, 50%)`
  }))
)

// 中心球状态
const sphereActive = ref(false)
const sphereHover = ref(false)

// 鼠标交互
const { x, y } = useMouse()
const portalStyle = computed(() => ({
  '--mouse-x': `${x.value - window.innerWidth/2}px`,
  '--mouse-y': `${y.value - window.innerHeight/2}px`
}))

// 连接线数据
const connectionLines = computed(() => {
  const lines = []
  const centerX = window.innerWidth / 2
  const centerY = window.innerHeight / 2
  
  menuItems.value.forEach(item => {
    const el = document.querySelector(`.menu-item[data-id="${item.id}"]`)
    if (el) {
      const rect = el.getBoundingClientRect()
      const itemX = rect.left + rect.width / 2
      const itemY = rect.top + rect.height / 2
      
      lines.push({
        x1: centerX,
        y1: centerY,
        x2: itemX,
        y2: itemY,
        color: item.color
      })
    }
  })
  
  return lines
})

// 开始体验
function startExperience() {
  showIntro.value = false
  animateMenuItems()
}

// 导航到对应路由
function navigateTo(url) {
  router.push(url)
}

// 菜单项动画
function animateMenuItems() {
  menuItems.value.forEach((item, index) => {
    gsap.fromTo(`.menu-item[data-id="${item.id}"]`, 
      { opacity: 0, scale: 0 },
      { 
        opacity: 1, 
        scale: 1,
        x: `${item.x}%`,
        y: `${item.y}%`,
        duration: 1,
        delay: index * 0.1,
        ease: 'elastic.out(1, 0.5)'
      }
    )
  })
}

// 获取菜单项样式
function getMenuItemStyle(item) {
  return {
    '--item-color': item.color,
    'left': `${item.x}%`,
    'top': `${item.y}%`,
    'transform': `scale(${item.scale}) rotate(${item.rotation}deg)`,
    'z-index': item.zIndex,
    'cursor': `pointer`
  }
}

// 获取浮动元素样式
function getFloatingElementStyle(element) {
  return {
    'width': `${element.size}px`,
    'height': `${element.size}px`,
    'left': `${element.x}%`,
    'top': `${element.y}%`,
    'background': element.color,
    'animation-duration': `${element.speed}s`
  }
}

// 鼠标悬停菜单项
function hoverItem(item) {
  if (!item.dragging) {
    gsap.to(`.menu-item[data-id="${item.id}"]`, {
      scale: 1.1,
      zIndex: 10,
      duration: 0.3
    })
  }
}

// 鼠标离开菜单项
function unhoverItem(item) {
  if (!item.dragging) {
    gsap.to(`.menu-item[data-id="${item.id}"]`, {
      scale: 1,
      zIndex: 1,
      duration: 0.3
    })
  }
}

// 切换中心球状态
function toggleSphere() {
    // 分散菜单项
    disperseMenuItems()
}

// 分散菜单项到随机位置
function disperseMenuItems() {
  sphereActive.value = false;
  
  // 停止所有旋转动画
  gsap.killTweensOf(".menu-item");
  
  // 动画分散到随机位置
  menuItems.value.forEach((item, index) => {
    // 随机位置 (确保不会太靠近边缘)
    const randomX = 10 + Math.random() * 80;
    const randomY = 10 + Math.random() * 80;
    
    // 更新数据模型
    item.x = randomX;
    item.y = randomY;
    
    // 延迟动画，逐个分散
    gsap.to(`.menu-item[data-id="${item.id}"]`, {
      x: randomX + "%",
      y: randomY + "%",
      duration: 1,
      delay: index * 0.1,
      ease: "elastic.out(1, 0.5)"
    });
  });
}  

// 鼠标悬停中心球
function hoverSphere() {
  sphereHover.value = true
  gsap.to('.tech-sphere', {
    scale: 1.1,
    duration: 0.3
  })
}

// 鼠标离开中心球
function unhoverSphere() {
  sphereHover.value = false
  if (!sphereActive.value) {
    gsap.to('.tech-sphere', {
      scale: 1,
      duration: 0.3
    })
  }
}

// 鼠标移动效果
function handleMouseMove() {
  // 浮动元素跟随鼠标轻微移动
  floatingElements.value.forEach((element, index) => {
    const distanceX = x.value - window.innerWidth * element.x / 100
    const distanceY = y.value - window.innerHeight * element.y / 100
    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)
    
    if (distance < 200) {
      const force = (200 - distance) / 200 * 2
      element.x -= (distanceX / distance) * force
      element.y -= (distanceY / distance) * force
    }
  })
}

// 初始化粒子背景
function initParticles() {
  const particlesEl = document.querySelector('.particles-background')
  if (!particlesEl) return
  
  const particleCount = 100
  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div')
    particle.className = 'particle'
    particle.style.left = `${Math.random() * 100}%`
    particle.style.top = `${Math.random() * 100}%`
    particle.style.width = `${Math.random() * 3 + 1}px`
    particle.style.height = particle.style.width
    particle.style.animationDelay = `${Math.random() * 5}s`
    particlesEl.appendChild(particle)
  }
}

// 浮动元素动画
function animateFloatingElements() {
  floatingElements.value.forEach(element => {
    setInterval(() => {
      element.x += Math.cos(element.direction * Math.PI / 180) * 0.1
      element.y += Math.sin(element.direction * Math.PI / 180) * 0.1
      
      // 边界检测
      if (element.x < 0 || element.x > 100) {
        element.direction = 180 - element.direction
      }
      if (element.y < 0 || element.y > 100) {
        element.direction = -element.direction
      }
    }, 50)
  })
}

onMounted(async () => {
  // 使用随机欢迎语（不再从后端获取）
  initParticles()
  animateFloatingElements()
  
  // 为菜单项添加data-id属性
  nextTick(() => {
    menuItems.value.forEach(item => {
      const el = document.querySelector(`.menu-item[data-id="${item.id}"]`)
      if (!el) {
        const elements = document.querySelectorAll('.menu-item')
        if (elements.length > item.id - 1) {
          elements[item.id - 1].setAttribute('data-id', item.id)
        }
      }
    })
  })
  
  // 启动动画循环
  useRafFn(() => {
    floatingElements.value.forEach(element => {
      const el = document.querySelector(`.floating-element[data-id="${element.id}"]`)
      if (el) {
        el.style.left = `${element.x}%`
        el.style.top = `${element.y}%`
      }
    })
  })

  // 启动随机事件生成器
  startRandomEvents();
})

// 流星数据
const meteors = ref([]);
// 恒星数据
const stars = ref([]);

// 获取流星样式
function getMeteorStyle(meteor) {
  return {
    'left': `${meteor.startX}%`,
    'top': `${meteor.startY}%`,
    'width': `${meteor.length}px`,
    'height': `${meteor.thickness}px`,
    'background': `linear-gradient(90deg, rgba(255,255,255,0), ${meteor.color})`,
    'transform': `rotate(${meteor.angle}deg)`,
    'opacity': meteor.opacity
  };
}

// 获取恒星样式
function getStarStyle(star) {
  return {
    'left': `${star.x}%`,
    'top': `${star.y}%`,
    'width': `${star.size}px`,
    'height': `${star.size}px`,
    'background': star.color,
    'box-shadow': `0 0 ${star.glowSize}px ${star.glowColor}`,
    'opacity': star.opacity
  };
}

// 创建新流星
function createMeteor() {
  const angle = Math.random() * 30 + 15; // 15-45度角
  const length = Math.random() * 150 + 100; // 100-250px长度
  const thickness = Math.random() * 3 + 1; // 1-4px厚度
  
  meteors.value.push({
    id: Date.now() + Math.random(),
    startX: Math.random() * 100,
    startY: -10,
    length,
    thickness,
    angle,
    color: `hsl(${Math.random() * 30 + 10}, 100%, 70%)`, // 暖色调
    opacity: 0,
    duration: Math.random() * 2 + 1 // 1-3秒持续时间
  });
  
  // 动画流星
  animateMeteor(meteors.value[meteors.value.length - 1]);
}

// 动画流星
function animateMeteor(meteor) {
  const endX = meteor.startX + Math.tan(meteor.angle * Math.PI / 180) * 120;
  const endY = 120;
  
  // 淡入并移动
  gsap.to(meteor, {
    opacity: 0.8,
    duration: 0.2,
    onComplete: () => {
      gsap.to(meteor, {
        startX: endX,
        startY: endY,
        duration: meteor.duration,
        ease: "power1.in",
        onComplete: () => {
          // 动画完成后移除流星
          meteors.value = meteors.value.filter(m => m.id !== meteor.id);
        }
      });
    }
  });
}

// 创建新恒星
function createStar() {
  const size = Math.random() * 5 + 2; // 2-7px大小
  const glowSize = size * 5; // 辉光大小
  
  stars.value.push({
    id: Date.now() + Math.random(),
    x: Math.random() * 100,
    y: Math.random() * 100,
    size,
    glowSize,
    color: `hsl(${Math.random() * 60 + 200}, 100%, 80%)`, // 冷色调
    glowColor: `hsl(${Math.random() * 60 + 200}, 100%, 50%)`,
    opacity: 0,
    twinkleInterval: null
  });
  
  // 动画恒星
  animateStar(stars.value[stars.value.length - 1]);
}

// 动画恒星
function animateStar(star) {
  // 淡入
  gsap.to(star, {
    opacity: 1,
    duration: 2,
    ease: "sine.inOut"
  });
  
  // 闪烁效果
  star.twinkleInterval = setInterval(() => {
    const targetOpacity = 0.7 + Math.random() * 0.3;
    gsap.to(star, {
      opacity: targetOpacity,
      duration: 0.5 + Math.random() * 2,
      ease: "sine.inOut"
    });
  }, 2000 + Math.random() * 3000);
  
  // 随机时间后消失
  setTimeout(() => {
    clearInterval(star.twinkleInterval);
    gsap.to(star, {
      opacity: 0,
      duration: 3,
      onComplete: () => {
        stars.value = stars.value.filter(s => s.id !== star.id);
      }
    });
  }, 10000 + Math.random() * 15000); // 10-25秒后消失
}

// 随机生成流星和恒星
function startRandomEvents() {
  // 流星生成器
  setInterval(() => {
    if (Math.random() > 0.7) { // 30%几率生成流星
      createMeteor();
    }
  }, 5000); // 每5秒检查一次
  
  // 恒星生成器
  setInterval(() => {
    if (stars.value.length < 5 && Math.random() > 0.5) { // 最多5颗恒星，50%几率生成
      createStar();
    }
  }, 3000); // 每3秒检查一次
}
</script>

<style lang="scss">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cosmic-portal {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #0a0e17 0%, #030510 100%);
  font-family: 'Orbitron', sans-serif;
  color: white;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'), auto;
}

/* 引导动画 */
.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(5px);
}

.intro-content {
  text-align: center;
  animation: introFadeIn 1.5s ease-out;
}

.intro-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #4fc08d, #42a5f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(79, 192, 141, 0.3);
}

.intro-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.8);
}

.intro-button {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  background: linear-gradient(90deg, #4fc08d, #42a5f5);
  border: none;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(66, 165, 245, 0.5);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(66, 165, 245, 0.8);
  }
}

@keyframes introFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 粒子背景 */
.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.particle {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: floatParticle 15s infinite ease-in-out;
  opacity: 0.6;
}

@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  50% { transform: translateY(-50px) translateX(20px); opacity: 0.8; }
}

/* 主容器 */
.portal-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: 
    translateX(calc(var(--mouse-x) * 0.01))
    translateY(calc(var(--mouse-y) * 0.01));
  transition: transform 0.1s ease-out;
}

/* 菜单项 */
.menu-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.menu-item {
  position: absolute;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  transition: transform 0.3s ease;
  will-change: transform;
  user-select: none;
  
  &.dragging {
    cursor: grabbing;
  }
}

.menu-item-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  z-index: 2;
  padding: 1rem;
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px var(--item-color);
    transform: translateY(-5px);
  }
}

.item-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--item-color);
}

.menu-item h3 {
  color: white;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}

.menu-item-halo {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.3;
  z-index: 1;
  transition: all 0.3s ease;
}

.menu-item:hover .menu-item-halo {
  opacity: 0.6;
  transform: scale(1.2);
}

/* 中心科技球 */
.tech-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(66, 165, 245, 0.8), rgba(11, 36, 71, 0.8));
  box-shadow: 0 0 50px rgba(66, 165, 245, 0.5);
  cursor: pointer;
  transition: all 0.5s ease;
  z-index: 5;
  
  &.active {
    box-shadow: 0 0 80px rgba(66, 165, 245, 0.8);
    
    .sphere-core {
      animation: pulse 2s infinite ease-in-out;
    }
    
    //.sphere-ring {
    //  animation: rotate 10s infinite linear;
    //}
    
    //.sphere-ring2 {
      //animation: rotateReverse 8s infinite linear;
    //}
  }
}

.sphere-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.sphere-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 20px white;
}

.sphere-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.sphere-ring2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateReverse {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 连接线 */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.7;
  animation: floatElement 15s infinite ease-in-out;
}

@keyframes floatElement {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -15px); }
  50% { transform: translate(-5px, 10px); }
  75% { transform: translate(15px, 5px); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .menu-item {
    width: 100px;
    height: 100px;
  }
  
  .tech-sphere {
    width: 120px;
    height: 120px;
  }
}

/* 流星样式 */
.meteors-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.meteor {
  position: absolute;
  transform-origin: left center;
  will-change: transform, opacity;
}

/* 恒星样式 */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: opacity;
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
</style>